<template>
  <Select v-model:value="model" v-bind="attrs" :options="refOptions" :allowClear="true" />
</template>
<script setup lang="ts">
import type { DefaultOptionType } from 'ant-design-vue/es/select';

import { useAttrs, ref, onBeforeMount } from 'vue';

import { Select } from 'ant-design-vue';

// 定义 attrs 的类型，明确包含 api 函数
type ComponentAttrs = {
  api?: () => Promise<any>;
  options?: DefaultOptionType[];
  [key: string]: any;
};

// 类型断言转换 attrs 类型
const attrs = useAttrs() as ComponentAttrs;

const { options = [], ...restAttrs } = attrs;

const refOptions = ref<DefaultOptionType[]>(options);

const model = defineModel<string | number | undefined>();

onBeforeMount(async () => {
  // 调用前检查 api 是否存在且可调用
  if (typeof attrs.api === 'function') {
    console.log(options);
    await attrs.api();
    refOptions.value = [
      {
        value: 'jack1',
        label: 'Jack1',
      },
      {
        value: 'jack2',
        label: 'Jack2',
      },
      {
        value: 'jack3',
        label: 'Jack3',
      },
    ];
  }
});
</script>
